<template>
  <el-dialog
    class="invoicing-record-dialog"
    width="800px"
    :visible.sync="dialogVisible"
    title="开票记录"
    :close-on-click-modal="false"
    v-dialogDrag="true"
    @open="handleDialogOpen"
    @closed="handleDialogClosed"
  >
    <el-table :data="tableList" border v-loading="tableLoading">
      <el-table-column prop="invoiceDate" label="开票时间" align="center" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.invoiceDate }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="invoiceNumber" label="发票号码" align="center" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.invoiceNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="agreementInvoiceAmount" label="开票金额" align="center" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.agreementInvoiceAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="applyUserName" label="开票人" align="center" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.applyUserName }}</span>
        </template>
      </el-table-column>
    </el-table>

    <div class="dialog-footer" slot="footer">
      <el-button @click="dialogVisible = false">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { invoicingRecordList } from '@/api/person/invoicing'

export default {
  name: 'InvoicingRecordDialog',
  components: {
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    row: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.show
      },
      set(value) {
        this.$emit('update:show', value)
      }
    }
  },
  data() {
    return {
      queryParams: {},
      tableLoading: false,
      tableList: [],
      tableTotal: 0,
    }
  },
  created() {
    this.initQueryParams()
  },
  methods: {
    // 弹框打开时
    handleDialogOpen() {
      this.getTableListData()
    },
    // 弹框关闭时
    handleDialogClosed() {
      this.tableList = []
      this.$emit('refresh')
    },
    // 初始化查询参数
    initQueryParams() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10000,
      }
    },
    // 获取查询参数
    getQueryParams() {
      const params = JSON.parse(JSON.stringify(this.queryParams))
      params.agreementId = this.row.agreementId
      return params
    },
    // 获取收款记录列表
    getTableListData() {
      const params = this.getQueryParams()
      invoicingRecordList(params).then(res => {
        this.tableList = res.data || []
        this.tableTotal = res.total || 0
      }).catch(err => {})
    },
  }
}
</script>

<style lang="scss" scoped>
.invoicing-record-dialog {

  ::v-deep .el-dialog__body {
    max-height: 90vh;
    overflow-y: auto;
  }
}
</style>
